.popup {
    --notice-border-radius: 6px;
    text-align: left;
    box-sizing: border-box;
    padding: 12px;

    /* these properties need to be kept in sync with .pointy-bit, below */
    background-color: var(--vscode-quickInput-background);
    border: 1px solid var(--vscode-widget-border);

    color: var(--vscode-quickInput-foreground);
    box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
    border-radius: var(--notice-border-radius);

    position: absolute;
    bottom: calc(100% + var(--notice-border-radius));
    left: -3px;
    width: calc(100vw - 1.5rem);
}

.popup-trail {
    left: auto;
    right: -3px;
}

.pointy-bit {
    position: absolute;
    left: calc(50% - 6px);
    bottom: 100%;
    rotate: -45deg;
    width: 12px;
    height: 12px;

    /* these colors need to be kept in sync with .notice, above */
    background-color: var(--vscode-quickInput-background);
    border-left: 1px solid var(--vscode-widget-border);
    border-bottom: 1px solid var(--vscode-widget-border);

    /* no box shadow on this, it relies on overlapping the rest of the popup */
}

.popup-host {
    position: relative;
}

.row {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.row > .notice-close {
    flex-grow: 0;
}

.row > :not(.notice-close) {
    flex-grow: 1;
}

.action-button-container :nth-last-child(-n + 1) {
    background-color: var(--vscode-button-secondaryBackground);
    color: var(--vscode-button-secondaryForeground);
    border: var(--vscode-button-border);
}

.action-button-container :nth-last-child(-n + 1):hover {
    background-color: var(--vscode-button-secondaryHoverBackground);
}

.notice-close {
    margin-top: -5px;
    margin-right: -5px;
}

.popup h1,
.popup p {
    margin: 0;
    font-size: inherit;
}

.action-button-container {
    margin-top: 0.6rem;
}

.notice-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: auto;
    font-weight: 500;
}

.notice-text h1 {
    font-weight: bold;
}

.notice-icon {
    width: 24px;
    height: 24px;
}

/* When there's no notices we don't want the container taking up space and capturing clicks */
.popup:empty {
    display: none;
}
